<template>
  <div ref="chart" class="the-time-chart"></div>
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
// var echarts = require("echarts/lib/echarts");
// require("echarts/lib/chart/scatter");
// require("echarts/lib/chart/line");
// require("echarts/lib/chart/radar");
// require("echarts/lib/chart/custom");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/tooltip");
// require("echarts/lib/component/title");
// require("echarts/lib/component/axis");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/legend");

let radar0712 =
  "http://m.tuniucdn.com/fb2/t1/G6/M00/FE/37/Cii-U18Le3KIRyyGAAAVZlkpYDkAANp1AP_2YMAABV-30.json";
radar0712 = "https://qimage.owhat.cn/prod/master/image/3295200f-e885-4d96-96c2-b0376c1f6cde";
radar0712 = "https://qimage.owhat.cn/prod/master/image/44ec96b4-e562-4348-8b2f-486383a44ae0"
export default {
  name: "RadarV1",
  data() {
    return {};
  },
  mounted() {
    let ele = this.$refs["chart"];
    let chart = echarts.init(ele);
    const Place2dizhi = {
      hatinh: [300, 250],
      khao: [550, 150],
      tatmok: [510, 250],
      mongnai: [800, 150],
      paradiseresort: [620, 320],
      campbravo: [850, 380],
      campalpha: [200, 380],
      bootcamp: [480, 450],
      bahn: [720, 480],
      lawaki: [850, 520],
      quarry: [680, 610],
      ruins: [300, 620],
      painan: [450, 650],
      kampong: [860, 680],
      cave: [650, 750],
      tambang: [170, 720],
      nakham: [250, 800],
      sahmee: [350, 850],
      campcharlie: [580, 820],
      bantai: [610, 910],
      dock: [810, 870]
    };
    this.ajaxGetData().then(data => {
      // debugger;
      let place2radarIndex = JSON.parse(
        "{" +
          Object.keys(data)
            .map((e, i) => `"${e}":${i}`)
            .join(",") +
          "}"
      );
      // debugger
      let indicators = [
        {
          text: "战斗烈度的相反数",
          min: -60,
          max:-3,
          color: "white"
        },
        {
          text: "安全区",
          max: 20,
          color: "white"
        },
        {
          text: "物资",
          max: 0.99,
          color: "white"
        },
        {
          text: "配件",
          max: 350,
          color: "white"
        },
        {
          text: "药品",
          max: 370,
          color: "white"
        },
        {
          text: "武器",
          max: 270,
          color: "white"
        }
      ];
      let optRadars = Object.keys(data).map((name, i) => {
        return {
          id: name,
          center: Place2dizhi[name],
          radius: 50,
          axisLine: {
            show: true
          },
          splitArea: {
            show: true
          },
          indicator: indicators.map(e => {
            let o = { ...e };
            o.color = "rgba(0,0,0,0)";
            return o;
          }),
          splitNumber: 1,
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)"
            }
          },
          splitArea: {
            areaStyle: {
              color: ["rgba(0, 0, 0, 0.5)"],
              shadowColor: "rgba(0, 0, 0, 0.3)",
              shadowBlur: 10
            }
          }
        };
      });

      optRadars.push({
        id: "example",
        center: [130, 100],
        radius: 70,
        indicator: indicators
      });

      let _series_data = [];
      let _seriesesOfRadar = [];
      let legend_names = [];
      for (let _name in data) {
        // legend_names.push(data[_name]["name"]);
        _seriesesOfRadar.push({
          type: "radar",
          name: _name,
          radarIndex: place2radarIndex[_name],
          symbol: "none",
          tooltip: {
            trigger: "item"
          },
          lineStyle: {
            color: "#FF0080",
            opacity: 0
          },
          areaStyle: {
            opacity: 0.5,
            color: "red"
          },
          axisLabel: {
            color: "black"
          },
          data: [
            {
              name: data[_name]["name"],
              value: [
                -1*data[_name]["down"]*1000,
                data[_name]["safezone"],
                data[_name]["items"],
                data[_name]["items_attachment"]*10000000,
                data[_name]["items_use"]*10000000,
                data[_name]["items_weapon"]*10000000
              ],
              areaStyle: {
                opacity: 0.9,
                color: (_ => {
                  let isSafe =
                    data[_name]["is_safe"]
                  let isRich =
                    data[_name]["is_rich"]
                  if (isRich && isSafe) {
                    //A 
                    return "#FFFF66";
                  }
                  if (isRich && !isSafe) {
                    //B
                    return "#FF9933";
                  }
                  if (isSafe && !isRich) {
                    return "#B24645";
                  }
                  if (!(isRich || isSafe)) {
                    return "#FF00FF";
                  }
                  return "red";
                })()
              }
            }
          ]
        });
      }
      chart.setOption({
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis"
        },
        radar: [...optRadars],
        legend: {
          left: "center",
          data: []
        },
        graphic: [
          {
            type: "image",
            id: "logo",
            right: 0,
            top: 0,
            z: -10,
            bounding: "raw",
            origin: [0, 5],
            style: {
              image:
                "http://m.tuniucdn.com/fb2/t1/G6/M00/F0/BC/Cii-TF781C2IcJj7AA590so7b_UAANa_AI4S9UADn3q184.jpg",
              width: 1000,
              height: 1000,
              opacity: 1 + 0.71
            }
          },
          {
            type: "text",
            left: "0",
            top: "0",
            style: {
              fill: "#fff",
              // text: "图例",
              font: "bold 26px Microsoft YaHei"
            }
          }
        ],
        series: [..._seriesesOfRadar]
      });
    });
  },
  methods: {
    ajaxGetData() {
      return new Promise(resolve => {
        axios
          .get(radar0712)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.the-time-chart {
  width: 1000px;
  height: 1000px;
}
</style>